Day1 JS: Drum Kit

Demo

第1天的實作是建立一個類似打鼓就產生音效的網頁，當點擊鍵盤時會讓網頁的element產生音效和動態的畫面效果。

首先在畫面建立數個div元素，在每個div元素中，包含著span元素，span的內容是對應著鍵盤值。

<span>Q</span>

在每個div元素的屬性加入鍵盤的keycode，而鍵盤Q的keycode值等於81，因此在div中的屬性建立press-key="81"，作為當事件觸發時所需要的值。

<div class="key" press-key="81"></div>

以及建立數個audio元素，每個audio都有各自的執行音效檔。

<audio keys="81" src="./sounds/boom.wav"></audio>

接下來在畫面window建立監聽事件，觸發事件的動作為keydown，而keydown就是當鍵盤按下的動作即觸發事件。

當事件觸發時，首先抓取鍵盤按下時產生的keycode，並運用keycode值來取得對應的div和audio元素。

const audio = document.querySelector(`audio[keys='${e.keyCode}']`);
const key = document.querySelector(`div[press-key='${e.keyCode}']`);

接下來是執行audio元素，讓他播放音樂，並透過設定播放時間從0開始。

audio.currentTime = 0;
audio.play();

以及將key加入CSS，讓他產生動態效果，而key的動態效果是透過CSS中的transition屬性來執行的。

key.classList.add('playing');

而當key的transition觸發完成後，要將動態效果給取消掉，是透過transitionend來觸發執行取消其動態效果。

Html

<div class="key" press-key="81">
  <span>Q</span>
</div>

<audio keys="81" src="./sounds/boom.wav"></audio>

Javascript:

1. window
   window 物件代表了一個包含 DOM 文件的視窗，其中的 document 屬性指向了視窗中載入的 Document 物件。而使用 document 的 defaultView 屬性，則可取得該 Document 物件所在的視窗 window 物件。

2. EventTarget.addEventListener()
   EventTarget.addEventListener() 方法能將指定的事件監聽器註冊到 EventTarget 實作物件上。EventTarget 可能是 Document 中的 Element 物件、Document 物件本身、Window 物件，或是其它支援事件的物件（如：XMLHttpRequest）。

3. document.querySelector(selectors)
   回傳 document 第一個符合特定選擇器群組的Element 物件。

4. document.querySelectorAll(selectors)
   回傳 document 全部符合特定選擇器群組的Element 物件。

5. elementNodeReference.classList
   Element.classList 唯讀屬性代表了該Element所擁有之類別屬性（Class Attribute）的即時更新集－DOMTokenList。

6. element.addEventListener("transitionend", function(event) {}
   transitionend是當transition完成之後，接下來執行 transitionend中的事件。

7. NodeList
   NodeList 物件是節點的集合，可藉由 Node.childNodes 屬性以及 document.querySelectorAll() 方法取得。

8. KeyboardEvent.keyCode
   keycode是指當鍵盤下時產生鍵盤的對應值。
   查詢鍵盤值keyCode1

CSS

1. transition
   CSS transitions 是當Element產生變化時，控制它的變化速度。
   CSS transitions provide a way to control animation speed when changing CSS properties.

2. transform
   transform CSS 屬性可以讓你修改 CSS 可視化格式模型（visual formatting model）的空間維度。使用此屬性，元件可以被平移、旋轉、縮放和傾斜。

Summary

身為一位新人，想透過js30來學習對於js的基礎，並強迫自己來寫點筆記來紀錄學習過程，因為在之前學習程式時，很少做到筆記以及記錄，造成之後有時會發生寫過就忘記的狀況，因此趁這個鐵人賽機會來讓自己成長。如果30天有任何紀錄錯誤的地方歡迎指教，讓大家一起成長往前邁進。

tags: window, querySelector, querySelectorAll, transition